<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.img{
				width: 145px;
				height: 200px;
				overflow: hidden;
				transition:all 1s;
			}
			.img img{
				width: 100%;
			}
			.slide{
				height: 0px;
			}
		</style>
	</head>
	<body>
		<div class="img"><img src="img/04.jpg"/></div>
		<div class="btn">
			<button>收起</button>
			<button>展开</button>
			<button>切换</button>
			<button>切换图片</button>
		</div>
		<script type="text/javascript">
			var btn = document.querySelectorAll(".btn button");
			var img = document.querySelector(".img");
			btn[0].addEventListener("click",function(){
				img.classList.add("slide");
				var i =Math.floor(Math.random()*arr.length);
				imgEle.setAttribute("src",arr[i]);
			})
			btn[1].addEventListener("click",function(){
				img.classList.remove("slide");
				var i =Math.floor(Math.random()*arr.length);
				imgEle.setAttribute("src",arr[i]);
			})
			btn[2].addEventListener("click",function(){
				img.classList.toggle("slide");
				var i =Math.floor(Math.random()*arr.length);
				imgEle.setAttribute("src",arr[i]);
			})
			
			//切换图片，获取img标签
			//元素也有，querySelector()方法
			var arr = ["img/g2.png","img/g3.png","img/g4.png","img/g5.png","img/g6.png","img/g7.png","img/g8.png"]
			var imgEle = img.querySelector("img");
			btn[3].addEventListener("click",function(){
				while (1){
					var i =Math.floor(Math.random()*arr.length);
					if(imgEle.src != arr[i]){
						break;
					}
				}
				imgEle.setAttribute("src",arr[i]);
				console.log(i);
			})
		</script>
	</body>
</html>
